<!-- 芒果日志 -- 禹光彩-- 2017-10-24 10:13:12 -->
<template>
  <div>
    <!-- 查询条件 日志类型、日志级别、业务类型、业务单号、日志标题、记录时间范围 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 100px;height:46px">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-select v-model="filters.type" size="small" placeholder="日志类型" style="vertical-align:top;" clearable id="el-select">
            <el-option label="系统日志" value="system"></el-option>
            <el-option label="业务日志" value="service"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.level" size="small" placeholder="日志级别" style="vertical-align:top;" clearable id="el-select">
            <el-option label="INFO" value="INFO"></el-option>
            <el-option label="ERROR" value="ERROR"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.serviceType" size="small" placeholder="业务类型" style="vertical-align:top;" clearable id="el-select">
            <el-option label="旅游" value="tour"></el-option>
            <el-option label="签证" value="visa"></el-option>
            <el-option label="机票" value="flight"></el-option>
            <el-option label="酒店" value="hotel"></el-option>
            <el-option label="租车" value="car"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.serviceOrderNo" size="small" placeholder="业务单号" style="vertical-align:top;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.title" size="small" placeholder="日志标题" style="vertical-align:top;"></el-input>
        </el-form-item>
        <div>
          <el-form-item>
            <el-date-picker v-model="filters.starttime" size="small" type="date" placeholder="开始日期" @change="datebj" style="vertical-align:top;">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="filters.endtime" size="small" type="date" placeholder="结束日期" @change="datebj" style="vertical-align:top;">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="search" size="small" style="vertical-align:top;line-height:14px">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-col>
    <el-table :data="mongoLogsList" v-loading="listLoading" border style="width: 100%; font-size: 12px;" tooltip-effect="light">
      <el-table-column align="center" :formatter="formatLogsType" label="日志类型" width="120px;"></el-table-column>
      <el-table-column align="center" prop="level" label="日志级别" width="120px;"></el-table-column>
      <el-table-column align="center" :formatter="formatLogsServiceType" label="业务类型" width="120px;"></el-table-column>
      <el-table-column align="center" prop="serviceOrderNo" label="业务单号" width="150px;"></el-table-column>
      <el-table-column align="center" prop="title" label="日志标题" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="content" label="日志内容" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" :formatter="createTimeStr" label="记录时间" width="160px;"></el-table-column>
      <el-table-column align="center" width="100" label="操作">
        <template scope="scope">
          <el-button size="small" type="primary" @click="showDetail(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-col :span="24" class="toolbar" style="margin-top: 15px;height: 50px;float: right;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"
                     :total="total" style="float: right;" :current-page="pageNumber">
      </el-pagination>
    </el-col>
    <!--详情弹出层-->
    <el-dialog title="日志详情" v-model="showLogDetail" :close-on-click-modal="false" size="full" @close="showLogDetail = false" close-on-press-escape style="height:630px;width:600px; margin: 100px auto 0;text-align:center;">
      <div style="text-align:left;">
        <div>
          <span><span style="width:100px;display: inline-block">日志类型：</span>{{mongoLogs.type}}</span>
          <span style="margin-left: 100px;"><span style="width:100px;display: inline-block">日志级别：</span>{{mongoLogs.level}}</span>
        </div>
        <div style="margin-top:6px">
          <span><span style="width:100px;display: inline-block">业务类型：</span>{{mongoLogs.serviceType}}</span>
          <span style="margin-left: 100px;"><span style="width:100px;display: inline-block">业务单号：</span>{{mongoLogs.serviceOrderNo}}</span>
        </div>
        <div style="margin-top:6px">
          <span><span style="display: inline-block">日志标题：</span>{{mongoLogs.title}}</span>
        </div>
        <div style="text-align:left">
          <span>
            <span style="width:100px;display: inline-block;margin-bottom:6px">日志内容：</span>
            <el-input type="textarea" v-model="mongoLogs.content" readonly></el-input>
          </span>
        </div>
        <div style="margin-top:6px">
          <span>记录时间：{{mongoLogs.createTime}}</span>
        </div>
      </div>
      <!--<el-form :model="mongoLogs" label-width="70px" style="margin-top: -30px;">
        <el-form-item label="日志类型" prop="type" id="formheight">
          <el-input v-model="mongoLogs.type" readonly></el-input>
        </el-form-item>
        <el-form-item label="日志级别" prop="level" id="formheight">
          <el-input v-model="mongoLogs.level" readonly ></el-input>
        </el-form-item>
        <el-form-item label="业务类型" prop="serviceType" id="formheight">
          <el-input v-model="mongoLogs.serviceType" readonly ></el-input>
        </el-form-item>
        <el-form-item label="业务单号" prop="serviceOrderNo" id="formheight">
          <el-input v-model="mongoLogs.serviceOrderNo" readonly ></el-input>
        </el-form-item>
        <el-form-item label="日志标题" prop="title" id="formheight">
          <el-input v-model="mongoLogs.title" readonly></el-input>
        </el-form-item>
        <el-form-item label="日志内容" prop="content">
          <el-input v-model="mongoLogs.content" readonly type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="记录时间	" prop="createTime" id="formheight">
          <el-input v-model="mongoLogs.createTime" readonly></el-input>
        </el-form-item>
      </el-form>-->
      <div scope="footer" class="dialog-footer" style="margin-top:-40px;bottom:20px;right:20px;">
        <el-button @click.native="showLogDetail = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        loginType: '',
        listLoading: false,
        mongoLogsList: [],
        total: 0,
        pageNumber: 1,
        pageSize: 10,
        typeArr: {'system': '系统日志', 'service': '业务日志'},
        serviceArr: {'tour': '旅游', 'visa': '签证', 'flight': '机票', 'hotel': '酒店', 'car': '租车', '': '无'},
        showLogDetail: false,
        filters: {
          type: '', // 日志类型（system=系统日志、业务日志=业务日志）、
          level: '', // 日志级别（level，string，INFO、ERROR）、
          serviceType: '', // 业务类型（serviceType，tour=旅游、visa=签证、flight=机票、hotel=酒店、car=租车、“”=无）、
          serviceOrderNo: '', // 业务单号（serviceOrderNo，stirng）、
          title: '', // 日志标题（title，string）、
          starttime: '',
          endtime: ''
        },
        mongoLogs: {
          type: '',
          level: '',
          serviceType: '',
          serviceOrderNo: '',
          title: '',
          content: '',
          createTime: ''
        }
      }
    },
    methods: {
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initmongoLogs()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.pageNumber = val
        this.currentPage = val
        this.initmongoLogs()
      },
      // 日志类型
      formatLogsType (row, column) {
        if (row.type) {
          return this.typeArr[row.type]
        } else {
          return '- -'
        }
      },
      // 业务类型
      formatLogsServiceType (row, column) {
        let st = row.serviceType
        return this.serviceArr[st]
      },
      // 时间格式化
      createTimeStr (row, column) {
        let d = new Date(row.createTime)
        return this.forLogDate(d)
      },
      forLogDate (d) {
        if (d !== '') {
          var year = d.getFullYear()
          var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
          var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
          var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
          var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
          var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
          return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
        } else {
          return ''
        }
      },
      fortime (d) {
        if (d !== '') {
          var year = d.getFullYear()
          var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
          var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
          return year + '-' + month + '-' + date
        } else {
          return ''
        }
      },
      // 日期对比
      datebj () {
        if (this.filters.starttime !== '') {
          if (this.filters.endtime !== '') {
            if (this.filters.starttime > this.filters.endtime) {
              this.$message({
                showClose: true,
                message: '结束日期需大于开始日期',
                type: 'error'
              })
            }
          }
        }
      },
      showDetail (index, row) {
        this.mongoLogs = Object.assign({}, row)
        this.mongoLogs.type = this.typeArr[row.type]
        this.mongoLogs.serviceType = this.serviceArr[row.serviceType]
        this.showLogDetail = true
        this.mongoLogs.createTime = this.createTimeStr(row, index)
      },
      search () {
        this.pageNumber = 1
        this.initmongoLogs()
      },
      initmongoLogs () {
        this.listLoading = true
        let stt = this.fortime(this.filters.starttime)
        let endt = this.fortime(this.filters.endtime)
        var para = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          type: this.loginType,
          logType: this.filters.type, // 日志类型（system=系统日志、业务日志=业务日志）、
          level: this.filters.level, // 日志级别（level，string，INFO、ERROR）、
          serviceType: this.filters.serviceType, // 业务类型（serviceType，tour=旅游、visa=签证、flight=机票、hotel=酒店、car=租车、“”=无）、
          serviceOrderNo: this.filters.serviceOrderNo, // 业务单号（serviceOrderNo，stirng）、
          title: this.filters.title, // 日志标题（title，string）、
          starttime: stt,
          endtime: endt
        }
        this.$http.post('/smartLight/web/baseMongoLogs/getList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.mongoLogsList = resBody.list
            this.total = resBody.total
          } else {
            if (resBody.isSuccess === 2) {
              sessionOut(this) // session超时处理
            } else if (resBody.isSuccess !== 0) {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          }
        })
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        // 浏览器向前或向后处理
        resetBreads(this)
        this.loginType = user.type
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .el-tooltip__popper
    max-width: 1000px;
  #el-select
    .el-input
      vertical-align:top;
  .cell
    padding-left: 0px !important
    padding-right 0px !important
    overflow: hidden !important
    text-overflow: ellipsis !important
    white-space: nowrap !important
    .el-checkbox {
      padding-left: 15px !important
    }
  .el-textarea
    height: 350px;
    .el-textarea__inner
      height: 350px;
</style>
